<template>
  <div class="search-item" v-showsearchbtn v-if="cate.data.length > 0">
    <label class="label">{{ cate.label }}：</label>

    <div class="lists">
      <div class="style1" :class="{'is-show': cate.isShowMore}" v-show="!isShowMultiple">
        <ul class="clearfix r-lists">
          <li :class="{'active': cate.checks.length === 0 || cate.checks.length === cate.data.length}"
              @click="addAll()">
            全部
          </li>

          <li @click="change(item)"

              :class="{'active': cate.checks.includes(item) && cate.data.length > cate.checks.length}"
              v-for="item in cate.data"
              :key="item.id">{{item.name}}
          </li>
        </ul>

      </div>


      <div class="style2" v-show="isShowMultiple">
        <div>
          <label class="el-checkbox">
            <span class="el-checkbox__input" :class="{' is-checked': checkboxCheckeds.length === cate.data.length}">
              <span class="el-checkbox__inner"></span>
              <input @change="checkAll" type="checkbox" class="el-checkbox__original">
            </span>
            <span class="el-checkbox__label">全部</span>
          </label>

          <label class="el-checkbox" v-for="item in cate.data" :key="item.id" :title="item.name">
            <span class="el-checkbox__input" :class="{' is-checked': checkboxCheckeds.includes(item)}">
              <span class="el-checkbox__inner"></span>
              <input @change.stop="toggle(item)" type="checkbox" class="el-checkbox__original">
            </span>
            <span class="el-checkbox__label">{{ item.name }}</span>
          </label>
        </div>

        <div class="text-center">
          <button class="cancel" @click="cancel">取消</button>
          <button class="ok" @click="ok">确定</button>
        </div>
      </div>

    </div>

    <div class="action">
      <div v-show="!isShowMultiple">
        <button @click="showMultiple()" v-if="cate.isMultiple">多选 <i class="icon icon-plus"></i></button>
        <button class="btn-showmore" @click="showMore()" :class="{'is-show': cate.isShowMore}">更多 <i
          class="icon icon-arrow-down"></i>
        </button>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      cate: {
        type: Object,
        default () {
          return {}
        }
      }

    },

    mounted () {
      if (typeof this.cate.model === 'string') {
        let checksModel = this.cate.model.split(',') || []
        let checks = []
        let title = ''
        checksModel.forEach(item => {
          let c = this.cate.data.filter(item2 => item2.id === parseInt(item, 10))
          if (c.length > 0) {
            title += (c[0].name + ',')
            checks.push(c[0])
          }
        })

        this.cate.checksTitle = title
        this.cate.checks = checks


        this.checkboxCheckeds = [...checks]
      }
    },
    data () {
      return {
        isShowMultiple: false,
        checkboxCheckeds: []
      }
    },

    methods: {

      contrast (item, dataArray) {
        return dataArray.some(i => i.id === item.id)
      },

      /**
       * 显示更多
       */
      showMore () {
        this.cate.isShowMore = !this.cate.isShowMore
      },

      /**
       *  显示隐藏多选
       */
      showMultiple () {
        this.isShowMultiple = !this.isShowMultiple
      },

      /**
       * 取消关闭多选
       */
      cancel () {
        this.isShowMultiple = false
      },

      /**
       * 确定多选
       */
      ok () {
        this.isShowMultiple = false
        this.cate.checks = [...this.checkboxCheckeds]
        this.$emit('checkeds', {type: this.cate.type, data: this.cate.checks})
      },

      /**
       * 改变选中的
       * @param item
       */
      change (item) {
        this.cate.checks = [item]
        this.checkboxCheckeds = [...this.cate.checks]
        this.$emit('checkeds', {type: this.cate.type, data: this.cate.checks})
      },

      addAll () {
//        this.cate.checks = [...this.cate.data]
        this.cate.checks = []
        this.$emit('checkeds', {type: this.cate.type, data: this.cate.checks})
      },

      checkAll () {
        if (this.checkboxCheckeds.length === this.cate.data.length) {
          this.checkboxCheckeds = []
        } else {
          this.checkboxCheckeds = [...this.cate.data]
        }
      },

      toggle (item) {
        if (this.checkboxCheckeds.includes(item)) {
          const index = this.checkboxCheckeds.findIndex((item2) => item.name === item2.name)
          this.checkboxCheckeds.splice(index, 1)
        } else {
          this.checkboxCheckeds.push(item)
        }
      }
    },
    computed: {}
  }
</script>


<style lang="scss" scoped>
  @import "../../element-variables";

  button {
    outline: none;
  }

  .el-checkbox__label {
    display: inline;
  }

  .search-item {
    font-size: 14px;
    overflow: hidden;

    padding: 15px 0 15px 24px;
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 1px solid #dedede;
    margin-top: -1px;
    position: relative;
    /*+ .search-item {*/
    /*border-top: 1px solid #dedede;*/
    /*}*/

    .label {
      display: table-cell;
      width: 60px;
      color: #9e9e9e;
      text-align: right;
    }

    .lists {
      display: table-cell;

      .style1 {
        height: 30px;
        overflow: hidden;

        &.is-show {
          height: auto;
        }
      }

      li {
        margin-left: 30px;
        color: #3e3e3e;
        cursor: pointer;
        line-height: 30px;
        display: inline-block;

        &:hover {
          color: $--color-primary;
        }
      }

      .active {
        color: $--color-primary;
      }
    }

    .style2 {
      padding-left: 30px;

    }

    .action {
      width: 190px;
      display: table-cell;
      button {
        padding: 6px 12px;
        border: 1px solid #dedede;
        color: #6e6e6e;
        background: #fff;
        font-size: 14px;
        margin-right: 10px;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          border-color: $--color-primary;
          color: $--color-primary;

          @each $item in plus arrow-down {
            .icon-#{$item} {
              background-image: url("~assets/img/icons/#{$item}-primary.png");
            }
          }
        }
      }

      .btn-showmore {
        display: none;
      }

      .icon-arrow-down {
        transition: all .3s;
      }

      .is-show {
        .icon-arrow-down {
          transform: rotate(180deg);
        }
      }

      .icon {
        margin-left: 5px;
      }
    }
  }

  .cancel {
    width: 68px;
    text-align: center;
    line-height: 30px;
    color: $--color-primary;
    border: 1px solid $--color-primary;
    background: #fff;
    border-radius: 3px;
    margin-right: 8px;
    cursor: pointer;

    &:hover {
      background-color: rgba($--color-primary, .8);
      color: #fff;
    }
  }

  .ok {
    width: 68px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    border-radius: 3px;
    border: 1px solid $--color-primary;
    background-color: $--color-primary;
    cursor: pointer;

    &:hover {
      background-color: rgba($--color-primary, .8);
    }
  }
</style>
